<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>归楼兰 - 百业</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        /* === 基础样式 === */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            line-height: 1.6;
            color: #333;
            position: relative;
            min-height: 100vh;
            background-color: #1a1a1a;
            background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                              url('https://i.postimg.cc/C5Vmq7Wc/1.jpg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            overflow-x: hidden;
        }
        
        .container {
            max-width: 1400px;
            margin: 20px auto;
            padding: 20px;
        }
        
        /* === 导航栏样式 === */
        .navbar {
            background-color: rgba(40, 40, 40, 0.9);
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 100;
            backdrop-filter: blur(10px);
            border-bottom: 1px solid #c8a971;
            width: 100%;
        }
        
        .nav-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }
        
        .nav-logo {
            color: #f8f8f8;
            font-size: 1.8rem;
            font-weight: bold;
            text-shadow: 0 0 10px rgba(200, 169, 113, 0.5);
        }
        
        .nav-logo span {
            color: #c8a971;
        }
        
        .nav-menu {
            display: flex;
            list-style: none;
        }
        
        .nav-item {
            margin-left: 2rem;
        }
        
        .nav-link {
            color: #f8f8f8;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
            padding: 8px 16px;
            border-radius: 4px;
        }
        
        .nav-link:hover, .nav-link.active {
            color: #c8a971;
            background: rgba(200, 169, 113, 0.1);
        }
        
        /* === 页面标题 === */
        .page-title {
            text-align: center;
            color: #f8f8f8;
            margin: 30px 0;
            font-size: 2.5rem;
            text-shadow: 0 0 10px rgba(200, 169, 113, 0.5);
        }
        
        .page-subtitle {
            text-align: center;
            color: #c8a971;
            margin-bottom: 20px;
            font-size: 1.2rem;
        }
        
        /* === 成员页面样式 === */
        .members-container {
            display: flex;
            margin-top: 0;
            min-height: calc(100vh - 180px);
            background: transparent;
            border-radius: 0;
            overflow: hidden;
            box-shadow: none;
            padding: 0 20px 20px;
        }
        
        /* 左侧成员列表优化 - 固定定位，从导航栏下开始 */
        .members-list {
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            width: 220px;
            padding: 15px;
            background: rgba(30, 30, 30, 0.95);
            display: flex;
            flex-direction: column;
            gap: 12px;
            overflow-y: auto;
            border-right: 1px solid rgba(200, 169, 113, 0.2);
            z-index: 5;
        }
        
        /* 自定义滚动条样式 */
        .members-list::-webkit-scrollbar,
        .member-detail::-webkit-scrollbar {
            width: 6px;
        }
        
        .members-list::-webkit-scrollbar-track,
        .member-detail::-webkit-scrollbar-track {
            background: rgba(40, 40, 40, 0.5);
            border-radius: 3px;
        }
        
        .members-list::-webkit-scrollbar-thumb,
        .member-detail::-webkit-scrollbar-thumb {
            background: rgba(200, 169, 113, 0.5);
            border-radius: 3px;
        }
        
        .members-list::-webkit-scrollbar-thumb:hover,
        .member-detail::-webkit-scrollbar-thumb:hover {
            background: rgba(200, 169, 113, 0.8);
        }
        
        .member-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
            background: rgba(40, 40, 40, 0.8);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid transparent;
        }
        
        .member-item:hover {
            background: rgba(200, 169, 113, 0.15);
            border-color: rgba(200, 169, 113, 0.5);
            transform: translateY(-2px);
        }
        
        .member-item.active {
            background: rgba(200, 169, 113, 0.25);
            border: 1px solid #c8a971;
            box-shadow: 0 0 10px rgba(200, 169, 113, 0.5);
        }
        
        .member-item img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #c8a971;
            margin-bottom: 8px;
        }
        
        .member-item h3 {
            color: #f8f8f8;
            font-size: 13px;
            font-weight: 500;
            text-align: center;
        }
        
        /* 右侧成员详情区域 - 避开左侧固定栏 */
        .member-detail {
            flex: 1;
            position: relative;
            overflow-y: auto;
            height: calc(100vh - 220px);
            padding-bottom: 60px;
            margin-left: 220px;
        }
        
        /* 成员背景幻灯片样式 */
        .member-slider {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            overflow: hidden;
        }
        
        .member-slides {
            display: flex;
            width: 100%;
            height: 100%;
            transition: transform 0.8s ease;
        }
        
        .member-slide {
            min-width: 100%;
            height: 100%;
            position: relative;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        
        /* 智能背景图片尺寸调整 */
        .member-slide.landscape {
            /* 适用于宽屏图片(1600*736, 1920*1080) */
            background-size: cover;
            background-position: center 30%;
        }
        
        .member-slide.portrait {
            /* 适用于竖屏图片(2039*1280接近竖屏比例) */
            background-size: contain;
            background-position: center top;
            background-color: #0a0a0a; /* 添加背景色填充空白区域 */
        }
        
        /* 幻灯片控制按钮 */
        .member-slider-controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 10;
        }
        
        .member-slider-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .member-slider-dot.active {
            background: #c8a971;
            transform: scale(1.2);
        }
        
        .member-slider-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.3s;
            z-index: 10;
        }
        
        .member-slider-arrow:hover {
            background: rgba(200, 169, 113, 0.7);
        }
        
        .member-slider-arrow.prev {
            left: 20px;
        }
        
        .member-slider-arrow.next {
            right: 20px;
        }
        
        /* 右上角文字样式 - 包含标签区域 */
        .member-info {
            position: relative;
            z-index: 1;
            color: #fff;
            text-align: right;
            padding: 40px 60px;
            padding-bottom: 80px;
        }
        
        .member-info h1 {
            font-size: 2.8rem;
            margin-bottom: 15px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
        }
        
        .member-position {
            font-size: 1.4rem;
            margin-bottom: 20px;
            display: block;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
            letter-spacing: 1px;
        }
        
        /* 人物标签样式 */
        .member-tags {
            margin-bottom: 25px;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 10px;
        }
        
        .member-tag {
            background: rgba(200, 169, 113, 0.25);
            color: #fff;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.9rem;
            border: 1px solid rgba(200, 169, 113, 0.5);
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        }
        
        .member-description {
            font-size: 1.1rem;
            max-width: 400px;
            line-height: 1.8;
            text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
            margin-left: auto;
        }
        
        /* === 幻灯片样式（支持视频播放） === */
        .slider-container {
            position: relative;
            width: 100%;
            aspect-ratio: 16/9;
            overflow: hidden;
            border-radius: 10px;
            margin-bottom: 40px;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
            height: auto !important;
        }
        
        .slider {
            display: flex;
            width: 400%;
            height: 100%;
            transition: transform 0.8s ease;
        }
        
        .slide {
            width: 25%;
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #000;
        }
        
        /* 视频容器样式 */
        .slide-video-container {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        
        .slide-video, .slide-img {
            object-fit: contain;
            width: 100%;
            height: 100%;
            display: block;
        }
        
        .slide-content {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 30px;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
            color: #fff;
            z-index: 10;
        }
        
        .slide-title {
            font-size: 2rem;
            color: #c8a971;
            margin-bottom: 10px;
        }
        
        .slide-desc {
            font-size: 1.1rem;
            max-width: 600px;
        }
        
        .slider-controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 20;
        }
        
        .slider-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .slider-dot.active {
            background: #c8a971;
        }
        
        .slider-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.3s;
            z-index: 20;
        }
        
        .slider-arrow:hover {
            background: rgba(200, 169, 113, 0.7);
        }
        
        .slider-arrow.prev {
            left: 20px;
        }
        
        .slider-arrow.next {
            right: 20px;
        }
        
        /* === 其他页面样式 === */
        .home-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-top: 40px;
        }
        
        .intro-card {
            background: rgba(20, 20, 20, 0.7);
            padding: 30px;
            border-radius: 10px;
            border: 1px solid rgba(200, 169, 113, 0.3);
        }
        
        .intro-card h2 {
            color: #c8a971;
            margin-bottom: 20px;
            font-size: 1.8rem;
        }
        
        .intro-card p {
            color: #f8f8f8;
            line-height: 1.8;
            margin-bottom: 15px;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 40px;
        }
        
        .feature-card {
            background: rgba(20, 20, 20, 0.7);
            padding: 25px;
            border-radius: 10px;
            text-align: center;
            border: 1px solid rgba(200, 169, 113, 0.3);
            transition: transform 0.3s;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        .feature-icon {
            font-size: 2.5rem;
            color: #c8a971;
            margin-bottom: 15px;
        }
        
        .feature-card h3 {
            color: #f8f8f8;
            margin-bottom: 10px;
        }
        
        .feature-card p {
            color: #ccc;
            font-size: 0.95rem;
        }
        
        .strategies-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
            margin-top: 30px;
        }
        
        .strategy-card {
            background: rgba(20, 20, 20, 0.7);
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid rgba(200, 169, 113, 0.3);
            transition: transform 0.3s;
        }
        
        .strategy-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        .strategy-img {
            height: 180px;
            overflow: hidden;
        }
        
        .strategy-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }
        
        .strategy-card:hover .strategy-img img {
            transform: scale(1.05);
        }
        
        .strategy-content {
            padding: 20px;
        }
        
        .strategy-content h3 {
            color: #c8a971;
            margin-bottom: 10px;
            font-size: 1.3rem;
        }
        
        .strategy-content p {
            color: #ccc;
            margin-bottom: 15px;
            font-size: 0.95rem;
        }
        
        .strategy-meta {
            display: flex;
            justify-content: space-between;
            color: #888;
            font-size: 0.85rem;
            border-top: 1px solid rgba(200, 169, 113, 0.2);
            padding-top: 15px;
        }
        
        /* === 响应式设计 === */
        @media (max-width: 968px) {
            .slide-title {
                font-size: 1.5rem;
            }
            
            .home-content {
                grid-template-columns: 1fr;
            }
            
            .features-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .members-container {
                flex-direction: column;
            }
            
            /* 响应式调整：小屏幕上取消固定定位 */
            .members-list {
                position: relative;
                width: 100%;
                top: 0;
                bottom: auto;
                grid-template-columns: repeat(6, 1fr);
                height: 220px;
                max-height: none;
                border-right: none;
                border-bottom: 1px solid rgba(200, 169, 113, 0.2);
                padding-bottom: 20px;
            }
            
            .member-detail {
                width: 100%;
                height: calc(100vh - 400px);
                padding-bottom: 40px;
                margin-left: 0;
            }
            
            .member-info {
                top: 20px;
                right: 20px;
                padding: 30px;
            }
            
            .member-info h1 {
                font-size: 2.2rem;
            }
            
            /* 移动端幻灯片控制按钮调整 */
            .member-slider-arrow {
                width: 35px;
                height: 35px;
            }
            
            .member-slider-arrow.prev {
                left: 10px;
            }
            
            .member-slider-arrow.next {
                right: 10px;
            }
            
            /* 移动端图片显示优化 */
            .member-slide.portrait {
                background-size: cover;
                background-position: center 30%;
            }
        }
        
        @media (max-width: 768px) {
            .slide-content {
                padding: 15px;
            }
            
            .slide-title {
                font-size: 1.2rem;
            }
            
            .slide-desc {
                font-size: 0.9rem;
            }
            
            .slider-arrow {
                width: 40px;
                height: 40px;
            }
            
            .features-grid {
                grid-template-columns: 1fr;
            }
            
            .strategies-container {
                grid-template-columns: 1fr;
            }
            
            .members-list {
                grid-template-columns: repeat(4, 1fr);
            }
            
            .member-info {
                padding: 20px;
            }
        }
        
        @media (max-width: 576px) {
            .nav-container {
                flex-direction: column;
            }
            
            .nav-menu {
                margin-top: 15px;
                flex-wrap: wrap;
            }
            
            .nav-item {
                margin: 5px;
            }
            
            .member-info {
                padding: 15px;
                text-align: center;
            }
            
            .member-info h1 {
                font-size: 1.8rem;
            }
            
            .member-tags {
                justify-content: center;
            }
            
            .member-tag {
                font-size: 0.8rem;
                padding: 3px 10px;
            }
            
            .member-description {
                font-size: 1rem;
                margin-left: 0;
                max-width: 100%;
            }
            
            .page-title {
                font-size: 2rem;
            }
            
            .members-list {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .member-slider-controls {
                bottom: 10px;
            }
            
            .member-slider-dot {
                width: 10px;
                height: 10px;
            }
        }
        
        /* === 页面内容区域 === */
        .page-content {
            display: none;
        }
        
        .page-content.active {
            display: block;
            animation: fadeIn 0.8s ease;
        }
        
        /* === 动画效果 === */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .fade-in {
            animation: fadeIn 0.8s ease forwards;
        }
        
        /* === 装饰元素 === */
        .decoration {
            position: absolute;
            width: 200px;
            height: 200px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 10 L60 40 L90 40 L65 60 L75 90 L50 70 L25 90 L35 60 L10 40 L40 40 Z" fill="none" stroke="%23c8a971" stroke-width="2"/></svg>');
            background-size: contain;
            opacity: 0.1;
            z-index: 1;
        }
        
        .decoration-1 {
            top: 10%;
            left: 5%;
        }
        
        .decoration-2 {
            bottom: 10%;
            right: 5%;
            transform: rotate(45deg);
        }
        
        /* === 成员选择模块优化 === */
        .members-list-header {
            color: #c8a971;
            font-size: 1.2rem;
            margin-bottom: 15px;
            text-align: center;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(200, 169, 113, 0.3);
        }
        
        .member-search {
            margin-bottom: 15px;
            position: relative;
        }
        
        .member-search input {
            width: 100%;
            padding: 8px 12px;
            background: rgba(40, 40, 40, 0.8);
            border: 1px solid rgba(200, 169, 113, 0.3);
            border-radius: 20px;
            color: #f8f8f8;
            font-size: 0.9rem;
        }
        
        .member-search i {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #c8a971;
        }
        
        /* 字母筛选器 */
        .letter-filter {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 5px;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(200, 169, 113, 0.2);
        }
        
        .letter-filter span {
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            color: #f8f8f8;
            background: rgba(40, 40, 40, 0.8);
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.8rem;
            transition: all 0.2s;
        }
        
        .letter-filter span:hover,
        .letter-filter span.active {
            background: rgba(200, 169, 113, 0.3);
            color: #c8a971;
        }
    </style>
</head>
<body>
    <!-- 装饰元素 -->
    <div class="decoration decoration-1"></div>
    <div class="decoration decoration-2"></div>

    <!-- 导航栏 -->
    <nav class="navbar" id="navbar">
        <div class="nav-container">
            <h1 class="nav-logo">燕云<span>十六声</span> · 归楼兰</h1>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#" class="nav-link active" data-page="home">首页</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" data-page="members">成员介绍</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" data-page="strategies">百业攻略</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- 首页内容 -->
    <div class="page-content active" id="home-page">
        <h1 class="page-title">归楼兰 · 百业</h1>
        <p class="page-subtitle">探索江湖百业，体验多样人生</p>
        
        <div class="container">
            <!-- 支持视频的幻灯片 -->
            <div class="slider-container">
                <div class="slider">
                    <!-- 图片幻灯片1 -->
                    <div class="slide">
                        <img src="https://gitee.com/dongqiuxin/guiloulan/raw/master/%E4%B8%BB%E9%A1%B5%E8%A7%86%E9%A2%91/%E5%B9%BB%E7%81%AF%E7%89%872.jpg" alt="燕云十六声宣传图" class="slide-img">
                        <div class="slide-content">
                            <h2 class="slide-title">燕云十六声</h2>
                            <p class="slide-desc">这里是属于我们的江湖！</p>
                        </div>
                    </div>
                    
                    <!-- 图片幻灯片2 -->
                    <div class="slide">
                        <img src="https://gitee.com/dongqiuxin/guiloulan/raw/master/%E4%B8%BB%E9%A1%B5%E8%A7%86%E9%A2%91/%E5%B9%BB%E7%81%AF%E7%89%871.jpg" alt="燕云十六声宣传图" class="slide-img">
                        <div class="slide-content">
                            <h2 class="slide-title">归楼兰</h2>
                            <p class="slide-desc">要写桃李春风一杯酒，江湖夜雨十年灯</p>
                        </div>
                    </div>
                    
                    <!-- 图片幻灯片3 -->
                    <div class="slide">
                        <img src="https://gitee.com/dongqiuxin/guiloulan/raw/master/%E4%B8%BB%E9%A1%B5%E8%A7%86%E9%A2%91/%E5%B9%BB%E7%81%AF%E7%89%873.jpg" alt="医师形象" class="slide-img">
                        <div class="slide-content">
                            <h2 class="slide-title">侠</h2>
                            <p class="slide-desc">一剑霜寒十四州</p>
                        </div>
                    </div>
                    
                    <!-- 视频幻灯片4 -->
                    <div class="slide">
                        <div class="slide-video-container">
                            <video class="slide-video" autoplay muted loop playsinline>
                                <source src="https://i.postimg.cc/kMjVYvB1/2.jpg" type="video/mp4">
                                <img src="https://i.postimg.cc/kMjVYvB1/2.jpg" alt="刺客演示" class="slide-img">
                            </video>
                        </div>
                        <div class="slide-content">
                            <h2 class="slide-title">暗影潜行</h2>
                            <p class="slide-desc">隐匿于暗影之中，伺机而动，给予敌人致命一击</p>
                        </div>
                    </div>
                </div>
                
                <div class="slider-arrow prev">
                    <i class="fas fa-chevron-left"></i>
                </div>
                <div class="slider-arrow next">
                    <i class="fas fa-chevron-right"></i>
                </div>
                
                <div class="slider-controls">
                    <div class="slider-dot active"></div>
                    <div class="slider-dot"></div>
                    <div class="slider-dot"></div>
                    <div class="slider-dot"></div>
                </div>
            </div>
            
            <div class="home-content">
                <div class="intro-card">
                    <h2>百业公告活动</h2>
                    <p>第一届国庆节斗地主活动开始报名,动动手就能赢绝美自选外观第一名:258,第二三名,128,还有战令和月卡，欢迎大家踊跃报名报名链接如下</p>
                    <p>【腾讯文档】国庆节百业活动报名https://docs.qq.com/form/page/sequence/DR1ZsVnVYbHJVSWhm</p>
                </div>
                
                <div class="intro-card">
                    <h2>百业特色</h2>
                    <p>1. <strong>每月福利</strong> - 按照百业贡献度抽取每月的月卡、战令福利。</p>
                    <p>2. <strong>固定车队</strong> - 周一固定车队连带3车百业本加十人首通、周六补车。</p>
                    <p>3. <strong>专业黑工</strong> - 十人、五人首通本、天赋群内有专业黑工免费帮忙。</p>
                    <p>4. <strong>社交互动</strong> - 群里的朋友都是你坚强的依靠。</p>
                </div>
            </div>
            
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-fist-raised"></i>
                    </div>
                    <h3>战斗职业</h3>
                    <p>剑客、弓手、刺客等各类战斗职业，体验热血沸腾的江湖厮杀</p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-tools"></i>
                    </div>
                    <h3>生产职业</h3>
                    <p>铁匠、药师、工匠等生产职业，打造神兵利器与灵丹妙药</p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-coins"></i>
                    </div>
                    <h3>商业职业</h3>
                    <p>商人、镖师等商业职业，纵横商海，富甲一方</p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-leaf"></i>
                    </div>
                    <h3>采集职业</h3>
                    <p>农夫、矿工、渔夫等采集职业，获取自然资源，支撑整个经济体系</p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-heart"></i>
                    </div>
                    <h3>辅助职业</h3>
                    <p>医师、乐师等辅助职业，救死扶伤，增益队友</p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-user-secret"></i>
                    </div>
                    <h3>特殊职业</h3>
                    <p>盗贼、卦师等特殊职业，游走于光明与黑暗之间</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 成员介绍页面内容 -->
    <div class="page-content" id="members-page">
        <h1 class="page-title">百业成员介绍</h1>
        <p class="page-subtitle">探索燕云十六声中的各类职业精英</p>

        <div class="members-container">
            <!-- 左侧成员列表（固定定位，含搜索和筛选） -->
            <div class="members-list" id="membersList">
                <div class="members-list-header">成员列表</div>
                
                <div class="member-search">
                    <input type="text" placeholder="搜索成员..." id="memberSearch">
                    <i class="fas fa-search"></i>
                </div>
                
                <div class="letter-filter" id="letterFilter">
                    <span class="active">全部</span>
                    <span>A</span>
                    <span>B</span>
                    <span>C</span>
                    <span>D</span>
                    <span>E</span>
                    <span>F</span>
                    <span>G</span>
                    <span>H</span>
                    <span>J</span>
                    <span>K</span>
                    <span>L</span>
                    <span>M</span>
                    <span>N</span>
                    <span>P</span>
                    <span>Q</span>
                    <span>R</span>
                    <span>S</span>
                    <span>T</span>
                    <span>W</span>
                    <span>X</span>
                    <span>Y</span>
                    <span>Z</span>
                </div>
                <!-- 成员列表将通过JavaScript动态生成 -->
            </div>
            
            <!-- 右侧成员详情区域 -->
            <div class="member-detail" id="memberDetail">
                <!-- 幻灯片容器 -->
                <div class="member-slider">
                    <div class="member-slides"></div>
                    <div class="member-slider-arrow prev">
                        <i class="fas fa-chevron-left"></i>
                    </div>
                    <div class="member-slider-arrow next">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                    <div class="member-slider-controls"></div>
                </div>
                
                <div class="member-info">
                    <!-- 内容由JS填充 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 攻略页面内容 -->
    <div class="page-content" id="strategies-page">
        <h1 class="page-title">百业攻略指南</h1>
        <p class="page-subtitle">掌握各职业技巧，成为行业翘楚</p>

        <div class="container">
            <div class="strategies-container">
                <div class="strategy-card">
                    <div class="strategy-img">
                        <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=400" alt="剑客攻略">
                    </div>
                    <div class="strategy-content">
                        <h3>剑客进阶攻略</h3>
                        <p>掌握剑客连招技巧与心法搭配，成为战场上的致命利刃...</p>
                        <div class="strategy-meta">
                            <span><i class="far fa-clock"></i> 3天前</span>
                            <span><i class="far fa-eye"></i> 1280</span>
                        </div>
                    </div>
                </div>
                
                <div class="strategy-card">
                    <div class="strategy-img">
                        <img src="https://images.unsplash.com/photo-1579547621113-e4bb2a19bdd6?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=400" alt="弓手攻略">
                    </div>
                    <div class="strategy-content">
                        <h3>弓手精准射击指南</h3>
                        <p>从基础瞄准到高级技巧，全面提升你的远程输出能力...</p>
                        <div class="strategy-meta">
                            <span><i class="far fa-clock"></i> 1周前</span>
                            <span><i class="far fa-eye"></i> 986</span>
                        </div>
                    </div>
                </div>
                
                <div class="strategy-card">
                    <div class="strategy-img">
                        <img src="https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=400" alt="医师攻略">
                    </div>
                    <div class="strategy-content">
                        <h3>医师治疗全解析</h3>
                        <p>团队治疗时机把握与技能循环，成为团队不可或缺的守护者...</p>
                        <div class="strategy-meta">
                            <span><i class="far fa-clock"></i> 5天前</span>
                            <span><i class="far fa-eye"></i> 1542</span>
                        </div>
                    </div>
                </div>
                
                <div class="strategy-card">
                    <div class="strategy-img">
                        <img src="https://images.unsplash.com/photo-1586985289688-ca3cf47bfc60?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=400" alt="刺客攻略">
                    </div>
                    <div class="strategy-content">
                        <h3>刺客隐身与爆发技巧</h3>
                        <p>掌握隐身时机与连招组合，成为敌人最恐惧的暗影杀手...</p>
                        <div class="strategy-meta">
                            <span><i class="far fa-clock"></i> 2周前</span>
                            <span><i class="far fa-eye"></i> 2034</span>
                        </div>
                    </div>
                </div>
                
                <div class="strategy-card">
                    <div class="strategy-img">
                        <img src="https://images.unsplash.com/photo-1513326738677-b964603b136d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=400" alt="铁卫攻略">
                    </div>
                    <div class="strategy-content">
                        <h3>铁卫防御指南</h3>
                        <p>仇恨控制与伤害减免技巧，成为团队最坚实的盾牌...</p>
                        <div class="strategy-meta">
                            <span><i class="far fa-clock"></i> 4天前</span>
                            <span><i class="far fa-eye"></i> 1125</span>
                        </div>
                    </div>
                </div>
                
                <div class="strategy-card">
                    <div class="strategy-img">
                        <img src="https://images.unsplash.com/photo-1589656966895-2f33e7653819?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=400" alt="职业搭配">
                    </div>
                    <div class="strategy-content">
                        <h3>职业搭配与团队构建</h3>
                        <p>最优职业组合推荐，打造无敌团队应对各种挑战...</p>
                        <div class="strategy-meta">
                            <span><i class="far fa-clock"></i> 3周前</span>
                            <span><i class="far fa-eye"></i> 2876</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // === 成员数据 ===
        const members = [
            {
                id: 1,
                name: '财大器粗',
                position: '社主',
                tags: ['潜水', '指挥', '神出鬼没'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/%E8%B4%A2%E5%A4%A7%E6%B0%94%E7%B2%97.jpg',
                images: [
                    'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E8%83%8C%E6%99%AF/%E8%B4%A2%E5%A4%A7.jpg',
                    'https://i.postimg.cc/C5Vmq7Wc/1.jpg',
                    'https://i.postimg.cc/ZqkvFYCJ/4.jpg'
                ],
                description: '所行皆坦途，所念皆如愿。'
            },
            {
                id: 2,
                name: '屺',
                position: '副社主',
                tags: ['神秘的副社主', '潜水', '把妹王'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/%E5%B1%BA%E5%A4%B4%E5%83%8F.jpg',
                images: [
                    'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E8%83%8C%E6%99%AF/%E5%B1%BA1.jpg',
                    'https://i.postimg.cc/15jqXrSn/4-Za-ver.jpg',
                    'https://i.postimg.cc/C5Vmq7Wc/1.jpg'
                ],
                description: '我也想逃离这个烂掉的世界。'
            },
            {
                id: 3,
                name: '九流門菛主',
                position: '指挥',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1579547621113-e4bb2a19bdd6?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                images: [
                    'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E8%83%8C%E6%99%AF/%E8%8F%9B%E4%B8%BB1.jpg',
                    'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E8%83%8C%E6%99%AF/%E8%8F%9B%E4%B8%BB2.jpg',
                    'https://i.postimg.cc/ZqkvFYCJ/4.jpg'
                ],
                description: '神一般的存在。'
            },
            {
                id: 4,
                name: '草浅鱼中池',
                position: '指挥',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                images: [
                    'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E8%83%8C%E6%99%AF/%E8%8D%89%E6%B5%85%E9%B1%BC.png',
                    'https://i.postimg.cc/15jqXrSn/4-Za-ver.jpg',
                    'https://i.postimg.cc/C5Vmq7Wc/1.jpg'
                ],
                description: '神一般的存在'
            },
            {
                id: 5,
                name: '序傀',
                position: '指挥',
                tags: ['魔丸创始人','学霸'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/%E5%BA%8F%E6%84%A7.jpg',
                images: ['https://gitee.com/dongqiuxin/guiloulan/raw/master/%E8%83%8C%E6%99%AF/%E5%BA%8F%E6%84%A7.jpg'
                ],
                description: '天才的世界'
            },
            {
                id: 6,
                name: '域煜',
                position: '指挥',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/%E5%9F%9F%E7%85%9C.jpg',
                images: [
                    'https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                    'https://i.postimg.cc/15jqXrSn/4-Za-ver.jpg',
                    'https://i.postimg.cc/C5Vmq7Wc/1.jpg'
                ],
                description: '神一般的存在。'
            },
            {
                id: 7,
                name: '命翌',
                position: '半步演员',
                tags: ['贸易', '财富', '资源管理'],
                avatar: 'https://images.unsplash.com/photo-1546069901-5ec5556b11d3?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                images: ['https://gitee.com/dongqiuxin/guiloulan/raw/master/%E8%83%8C%E6%99%AF/%E5%91%BD%E7%BF%8C.png'

                ],
                description: '精通贸易之道的商业奇才，能够为团队积累财富，提供经济支持。商人职业可以低价采购稀有材料，高价出售商品，还能解锁特殊商店和交易渠道。'
            },
            {
                id: 8,
                name: '董秋心',
                position: '半步演员',
                tags: ['专业黑工', '潜水', '肝帝'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/%E7%A7%8B%E5%BF%83.jpg',
                images: ['https://gitee.com/dongqiuxin/guiloulan/raw/master/%E8%83%8C%E6%99%AF/%E7%A7%8B%E5%BF%83.png'
                    
                ],
                description: '天不生我董秋心，燕云万古如长夜'
            },
            {
                id: 9,
                name: '久朝妄寐',
                position: '归楼兰',
                tags: ['林中鸟'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/%E4%B9%85%E6%9C%9D%E5%A6%84%E5%AF%90.jpg',
                images: ['https://gitee.com/dongqiuxin/guiloulan/raw/master/%E8%83%8C%E6%99%AF/%E6%9E%97%E4%B8%AD%E9%B8%9F1.jpg'

                ],
                description: '财可通天'
            },
            {
                id: 10,
                name: '煕嵐',
                position: '归楼兰',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1590523538388-0e89671f400f?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                images: ['https://gitee.com/dongqiuxin/guiloulan/raw/master/%E8%83%8C%E6%99%AF/%E7%86%99%E8%91%BB.png'

                ],
                description: '神一般的存在'
            },
            {
                id: 11,
                name: '剑玄影',
                position: '归楼兰',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/%E5%89%91%E7%8E%84%E5%BD%B1.jpg',
                images: ['https://gitee.com/dongqiuxin/guiloulan/raw/master/%E8%83%8C%E6%99%AF/%E5%89%91%E7%8E%84%E5%BD%B1.png'

                ],
                description: '神一般的存在'
            },
            {
                id: 12,
                name: '酒茸茸',
                position: '归楼兰',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                images: ['https://gitee.com/dongqiuxin/guiloulan/raw/master/%E8%83%8C%E6%99%AF/%E9%85%92%E8%8C%B8%E8%8C%B8.png',

                ],
                description: '神一般的存在'
            },
            {
                id: 13,
                name: '埼沅',
                position: '宝贝',
                tags: ['追踪', '野外生存', '狩猎'],
                avatar: 'https://images.unsplash.com/photo-1557830252-140d1325835c?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1557830252-140d1325835c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '精通野外生存和追踪技巧，能够找到稀有资源和隐藏宝藏。猎人职业是探索未知区域的最佳选择。'
            },
            {
                id: 14,
                name: '似羡辰',
                position: '社众',
                tags: ['谋略', '知识', '破解谜题'],
                avatar: 'https://images.unsplash.com/photo-1573140247632-f8fd74997d5c?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1573140247632-f8fd74997d5c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '学识渊博，能够提供战略建议和破解谜题，在团队中扮演智囊的角色。'
            },
            {
                id: 15,
                name: '白马从西来',
                position: '社众',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/%E7%99%BD%E9%A9%AC%E4%BB%8E%E8%A5%BF%E6%9D%A515.jpg',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 16,
                name: '钟自在',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 17,
                name: '无有同梦乡',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                images: ['https://gitee.com/dongqiuxin/guiloulan/raw/master/%E8%83%8C%E6%99%AF/%E6%97%A0%E6%9C%89%E5%90%8C%E6%A2%A6%E4%B9%A1.png'

                ],
                description: '神一般的存在。'
            },
            {
                id: 18,
                name: '花雨慕',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                images: ['https://gitee.com/dongqiuxin/guiloulan/raw/master/%E8%83%8C%E6%99%AF/%E8%8A%B1%E9%9B%A8%E6%85%95.png'

                ],
                description: '神一般的存在。'
            },
            {
                id: 19,
                name: '祁晨煜',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 20,
                name: '望山鸿',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 21,
                name: '忽晩喵',
                position: '社众',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/21%E5%BF%BD%E6%99%A9%E5%96%B5.jpg',
                images: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 22,
                name: '小小啊茶',
                position: '社众',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/22%E5%B0%8F%E5%B0%8F%E5%95%8A%E8%8C%B6.jpg',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 23,
                name: '华丽演奏',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 24,
                name: '肆秋之',
                position: '社众',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/24%E8%82%86%E7%A7%8B%E4%B9%8B.jpg',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 25,
                name: '巍亦',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                images: ['https://gitee.com/dongqiuxin/guiloulan/raw/master/%E8%83%8C%E6%99%AF/%E5%B7%8D%E4%BA%A6.jpg'

                ],
                description: '神一般的存在'
            },
            {
                id: 26,
                name: '疯一度',
                position: '社众',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/26%E7%96%AF%E4%B8%80%E5%BA%A6.jpg',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 27,
                name: '梧呤',
                position: '社众',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/27%E6%A2%A7%E5%91%A4.jpg',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 28,
                name: '不冻三水巷',
                position: '社众',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/28%E4%B8%8D%E5%86%BB%E4%B8%89%E6%B0%B4%E5%B7%B7.jpg',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 29,
                name: '月亮糕糕挂',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 30,
                name: '海棠南鸢',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 31,
                name: '倪苏芊',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 32,
                name: '祤祇',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 33,
                name: '雷斯来肘击',
                position: '社众',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/33%E9%9B%B7%E6%96%AF%E6%9D%A5%E8%82%98%E5%87%BB.jpg',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 34,
                name: '香独秀',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 35,
                name: '空絮灵',
                position: '社众',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/35%E7%A9%BA%E7%B5%AE%E7%81%B5.jpg',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 36,
                name: '蓝屿晴',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                images: ['https://gitee.com/dongqiuxin/guiloulan/raw/master/%E8%83%8C%E6%99%AF/%E8%93%9D%E5%B1%BF%E6%99%B41.jpg',
                    'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E8%83%8C%E6%99%AF/%E8%93%9D%E5%B1%BF%E6%99%B42.jpg',
                ],
                description: '神一般的存在。'
            },
            {
                id: 37,
                name: '易木日月天',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 38,
                name: '氧气羊羊',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 39,
                name: '顾泊天',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 40,
                name: '牛耶耶不吃牛',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 41,
                name: '程静和',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 42,
                name: '高贵小黄鸭',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 43,
                name: '京洛棽',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 44,
                name: '桑景宜',
                position: '社众',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/44%E6%A1%91%E6%99%AF%E5%AE%9C.jpg',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 45,
                name: '櫻井祈梨',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 46,
                name: '雾屿听风起',
                position: '社众',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/46%E9%9B%BE%E5%B1%BF%E5%90%AC%E9%A3%8E%E8%B5%B7.jpg',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 47,
                name: '风婉鸣',
                position: '社众',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/47%E9%A3%8E%E5%A9%89%E9%B8%A3.jpg',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 48,
                name: '安檠',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 49,
                name: '宴殊淮',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 50,
                name: '少才语',
                position: '社众',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/50%E5%B0%91%E6%89%8D.jpg',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 51,
                name: '可樂水',
                position: '社众',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/51%E5%8F%AF%E6%A8%82%E6%B0%B4.jpg',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 52,
                name: '槿瀞',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 53,
                name: '失心小羊',
                position: '社众',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/53%E5%A4%B1%E5%BF%83%E5%B0%8F%E7%BE%8A.jpg',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 54,
                name: '林立枫',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 55,
                name: '那一抹鸽子血',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 56,
                name: '神之星移',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 57,
                name: '吴鋆鋆',
                position: '社众',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/57%E5%90%B4%E9%8B%86%E9%8B%86.jpg',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 58,
                name: '队友是演员',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 59,
                name: '眠梦思',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 60,
                name: '小全、小多',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 61,
                name: '藏龙晨',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 62,
                name: '宁无流',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 63,
                name: '君襄玉',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                images: ['https://gitee.com/dongqiuxin/guiloulan/raw/master/%E8%83%8C%E6%99%AF/%E5%90%9B%E8%A5%84%E7%8E%891.jpg'

                ],
                description: '神一般的存在。'
            },
            {
                id: 64,
                name: '江偣漓',
                position: '社众',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/64%E6%B1%9F%E5%81%A3%E6%BC%93.jpg',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 65,
                name: '云绮萝',
                position: '社众',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/65%E4%BA%91%E7%BB%AE%E7%BD%97.jpg',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 66,
                name: '繆饒',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 67,
                name: '付菀茵',
                position: '社众',
                tags: ['活泼乐观'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/%E4%BB%98%E8%8F%80%E8%8C%B5.jpg',
                images: ['https://gitee.com/dongqiuxin/guiloulan/raw/master/%E8%83%8C%E6%99%AF/1%E4%BB%98%E8%8F%80%E8%8C%B5.jpg'

                ],
                description: '神一般的存在。'
            },
            {
                id: 68,
                name: '椎家',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 69,
                name: '裘煜笙',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 70,
                name: '念零五',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 71,
                name: '公上卓素',
                position: '社众',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/71%E5%85%AC%E4%B8%8A%E5%8D%93%E7%B4%A0.jpg',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 72,
                name: '江郁霖',
                position: '社众',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/72%E6%B1%9F%E9%83%81%E9%9C%96.jpg',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 73,
                name: '痴骨朽',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                images: ['https://gitee.com/dongqiuxin/guiloulan/raw/master/%E8%83%8C%E6%99%AF/%E7%97%B4%E9%AA%A8.jpg'

                ],
                description: '神一般的存在'
            },
            {
                id: 74,
                name: '萧熠珵',
                position: '社众',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/74%E8%90%A7%E7%86%A0%E7%8F%B5.jpg',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 75,
                name: '海宁',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 76,
                name: '东镇抚司',
                position: '社众',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/76%E4%B8%9C%E9%95%87%E6%8A%9A%E5%8F%B8.jpg',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 77,
                name: '圆不圆',
                position: '社众',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/77%E5%9C%86%E4%B8%8D%E5%9C%86.jpg',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 78,
                name: '想缘生',
                position: '社众',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/78%E6%83%B3%E7%BC%98%E7%94%9F.jpg',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 79,
                name: '花离人',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 80,
                name: '琅琊行止',
                position: '社众',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 81,
                name: '叶岁黎',
                position: '学徒',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/81%E5%8F%B6%E5%B2%81%E9%BB%8E.jpg',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 82,
                name: '伽俚',
                position: '学徒',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 83,
                name: '百里卿欢',
                position: '学徒',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 84,
                name: '夙离之',
                position: '学徒',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 85,
                name: '君怡伤',
                position: '学徒',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 86,
                name: '韦礼咹',
                position: '学徒',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 87,
                name: '念卿宸',
                position: '学徒',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 88,
                name: '蒄初',
                position: '学徒',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 89,
                name: '賀白',
                position: '学徒',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 90,
                name: '黑桃可乐',
                position: '学徒',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 91,
                name: '仙若芷',
                position: '学徒',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/91%E4%BB%99%E8%8B%A5%E8%8A%B7.jpg',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 92,
                name: '祝你鱼块块',
                position: '学徒',
                tags: ['神'],
                avatar: 'https://gitee.com/dongqiuxin/guiloulan/raw/master/%E5%A4%B4%E5%83%8F/92%E7%A5%9D%E4%BD%A0%E9%B1%BC%E5%9D%97%E5%9D%97.jpg',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 93,
                name: '姜青乐',
                position: '学徒',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 94,
                name: '季奚湘',
                position: '学徒',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 95,
                name: '占华箫',
                position: '学徒',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 96,
                name: '笙歌慢慢',
                position: '学徒',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 97,
                name: '江阔苏',
                position: '学徒',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 98,
                name: '萝芸汐',
                position: '学徒',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            },
            {
                id: 99,
                name: '江有吉',
                position: '学徒',
                tags: ['神'],
                avatar: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100',
                image: 'https://images.unsplash.com/photo-1544842354-185217e15566?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800',
                description: '神一般的存在。'
            }
        ];
        
        // === 页面加载完成后执行 ===
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化导航
            initNavigation();
            
            // 初始化视频幻灯片
            initVideoSlider();
            
            // 初始化成员页面
            initMembersPage();
            
            // 初始化成员搜索和筛选
            initMemberFilters();
            
            // 关键修复：计算导航栏高度并设置左侧成员栏位置
            adjustMembersListPosition();
            
            // 窗口大小改变时重新计算位置
            window.addEventListener('resize', adjustMembersListPosition);
        });
        
        // 修复左侧成员栏位置的核心函数
        function adjustMembersListPosition() {
            const navbar = document.getElementById('navbar');
            const membersList = document.getElementById('membersList');
            
            if (navbar && membersList) {
                // 获取导航栏的实际高度（包括padding和border）
                const navbarHeight = navbar.offsetHeight;
                
                // 设置左侧成员栏的top值为导航栏的高度
                membersList.style.top = `${navbarHeight}px`;
                
                // 同时调整右侧详情区域的高度，确保滚动正常
                const memberDetail = document.getElementById('memberDetail');
                if (memberDetail) {
                    memberDetail.style.height = `calc(100vh - ${navbarHeight + 60}px)`;
                }
            }
        }
        
        // === 初始化导航 ===
        function initNavigation() {
            const navLinks = document.querySelectorAll('.nav-link');
            const pageContents = document.querySelectorAll('.page-content');
            
            navLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 更新导航激活状态
                    navLinks.forEach(item => item.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 显示对应页面
                    const pageId = this.getAttribute('data-page') + '-page';
                    pageContents.forEach(content => {
                        content.classList.remove('active');
                        if (content.id === pageId) {
                            content.classList.add('active');
                        }
                    });
                    
                    // 切换页面后重新调整成员列表位置（针对响应式布局）
                    adjustMembersListPosition();
                });
            });
        }
        
        // === 初始化视频幻灯片 ===
        function initVideoSlider() {
            const slider = document.querySelector('.slider');
            const slides = document.querySelectorAll('.slide');
            const videos = document.querySelectorAll('.slide-video');
            const dots = document.querySelectorAll('.slider-dot');
            const prevBtn = document.querySelector('.slider-arrow.prev');
            const nextBtn = document.querySelector('.slider-arrow.next');
            const sliderContainer = document.querySelector('.slider-container');
            
            let currentSlide = 0;
            const slideCount = slides.length;
            
            // 窗口大小变化时调整幻灯片
            function adjustSliderSize() {
                // 确保容器保持16:9比例
                const containerWidth = sliderContainer.offsetWidth;
                sliderContainer.style.height = `${containerWidth * 9 / 16}px`;
            }
            
            // 初始化时调整一次
            adjustSliderSize();
            
            // 监听窗口大小变化
            window.addEventListener('resize', adjustSliderSize);
            
            // 更新幻灯片位置
            function updateSlide() {
                slider.style.transform = `translateX(-${currentSlide * 25}%)`;
                
                // 确保当前幻灯片的视频播放，其他暂停
                videos.forEach((video, index) => {
                    if (index === currentSlide && video) {
                        video.play().catch(e => console.log('视频播放失败:', e));
                    } else if (video) {
                        video.pause();
                    }
                });
                
                // 更新指示点状态
                dots.forEach((dot, index) => {
                    dot.classList.toggle('active', index === currentSlide);
                });
            }
            
            // 下一张幻灯片
            function nextSlide() {
                currentSlide = (currentSlide + 1) % slideCount;
                updateSlide();
            }
            
            // 上一张幻灯片
            function prevSlide() {
                currentSlide = (currentSlide - 1 + slideCount) % slideCount;
                updateSlide();
            }
            
            // 点击指示点切换幻灯片
            dots.forEach((dot, index) => {
                dot.addEventListener('click', () => {
                    currentSlide = index;
                    updateSlide();
                    resetAutoSlide();
                });
            });
            
            // 添加箭头点击事件
            prevBtn.addEventListener('click', () => {
                prevSlide();
                resetAutoSlide();
            });
            
            nextBtn.addEventListener('click', () => {
                nextSlide();
                resetAutoSlide();
            });
            
            // 自动播放
            let autoSlideInterval = setInterval(nextSlide, 8000); // 视频幻灯片延长自动播放时间
            
            // 重置自动播放
            function resetAutoSlide() {
                clearInterval(autoSlideInterval);
                autoSlideInterval = setInterval(nextSlide, 8000);
            }
            
            // 鼠标悬停时暂停自动播放
            sliderContainer.addEventListener('mouseenter', () => {
                clearInterval(autoSlideInterval);
            });
            
            sliderContainer.addEventListener('mouseleave', () => {
                resetAutoSlide();
            });
            
            // 初始加载时确保第一个视频播放
            if (videos.length > 0 && videos[0]) {
                videos[0].play().catch(e => console.log('初始视频播放失败:', e));
            }
        }
        
        // === 初始化成员页面 ===
        function initMembersPage() {
            // 生成成员列表
            loadMembers();
        }
        
        // === 加载成员列表 ===
        function loadMembers() {
            const membersList = document.getElementById('membersList');
            if (!membersList) return;
            
            membersList.innerHTML = ''; // 清空后重新生成（保留搜索和筛选）
            const header = document.createElement('div');
            header.className = 'members-list-header';
            header.textContent = '成员列表';
            membersList.appendChild(header);
            
            const search = document.createElement('div');
            search.className = 'member-search';
            search.innerHTML = `
                <input type="text" placeholder="搜索成员..." id="memberSearch">
                <i class="fas fa-search"></i>
            `;
            membersList.appendChild(search);
            
            const filter = document.createElement('div');
            filter.className = 'letter-filter';
            filter.id = 'letterFilter';
            const letters = ['全部', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'W', 'X', 'Y', 'Z'];
            letters.forEach(letter => {
                const span = document.createElement('span');
                span.textContent = letter;
                if (letter === '全部') span.classList.add('active');
                filter.appendChild(span);
            });
            membersList.appendChild(filter);
            
            members.forEach(member => {
                const memberItem = document.createElement('div');
                memberItem.className = 'member-item';
                memberItem.setAttribute('data-name', member.name); // 用于搜索筛选
                memberItem.innerHTML = `
                    <img src="${member.avatar}" alt="${member.name}">
                    <h3>${member.name}</h3>
                `;
                memberItem.addEventListener('click', () => {
                    // 移除所有活跃状态
                    document.querySelectorAll('.member-item').forEach(item => {
                        item.classList.remove('active');
                    });
                    // 添加当前项活跃状态
                    memberItem.classList.add('active');
                    // 显示成员详情
                    showMemberDetail(member);
                });
                membersList.appendChild(memberItem);
            });
            
            // 默认显示第一个成员
            if (members.length > 0) {
                const firstItem = membersList.querySelector('.member-item');
                firstItem.classList.add('active');
                showMemberDetail(members[0]);
            }
        }
        
        // === 显示成员详情 ===
        function showMemberDetail(member) {
            const memberDetail = document.getElementById('memberDetail');
            const memberSlides = memberDetail.querySelector('.member-slides');
            const memberSliderControls = memberDetail.querySelector('.member-slider-controls');
            const memberInfo = memberDetail.querySelector('.member-info');
            
            // 清空现有幻灯片内容
            memberSlides.innerHTML = '';
            memberSliderControls.innerHTML = '';
            
            // 创建幻灯片
            member.images.forEach((image, index) => {
                const slide = document.createElement('div');
                slide.className = 'member-slide';
                slide.style.backgroundImage = `url('${image}')`;
                
                // 创建临时图片对象来检测图片尺寸
                const img = new Image();
                img.onload = function() {
                    const width = this.width;
                    const height = this.height;
                    const aspectRatio = width / height;
                    
                    // 根据宽高比智能选择显示方式
                    if (aspectRatio > 1.4) {
                        slide.classList.add('landscape');
                    } else {
                        slide.classList.add('portrait');
                    }
                };
                img.src = image;
                
                memberSlides.appendChild(slide);
                
                // 创建控制点
                const dot = document.createElement('div');
                dot.className = 'member-slider-dot';
                if (index === 0) dot.classList.add('active');
                dot.addEventListener('click', () => {
                    goToSlide(index);
                });
                memberSliderControls.appendChild(dot);
            });
            
            // 初始化幻灯片状态
            let currentSlide = 0;
            const slides = memberSlides.querySelectorAll('.member-slide');
            const dots = memberSliderControls.querySelectorAll('.member-slider-dot');
            const totalSlides = slides.length;
            
            // 更新幻灯片位置
            function updateSlide() {
                memberSlides.style.transform = `translateX(-${currentSlide * 100}%)`;
                
                // 更新指示点状态
                dots.forEach((dot, index) => {
                    dot.classList.toggle('active', index === currentSlide);
                });
            }
            
            // 转到指定幻灯片
            function goToSlide(index) {
                currentSlide = index;
                updateSlide();
            }
            
            // 下一张幻灯片
            function nextSlide() {
                currentSlide = (currentSlide + 1) % totalSlides;
                updateSlide();
            }
            
            // 上一张幻灯片
            function prevSlide() {
                currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
                updateSlide();
            }
            
            // 添加箭头点击事件
            const prevBtn = memberDetail.querySelector('.member-slider-arrow.prev');
            const nextBtn = memberDetail.querySelector('.member-slider-arrow.next');
            
            prevBtn.onclick = () => prevSlide();
            nextBtn.onclick = () => nextSlide();
            
            // 生成标签HTML
            let tagsHtml = '';
            if (member.tags && member.tags.length > 0) {
                tagsHtml = '<div class="member-tags">';
                member.tags.forEach(tag => {
                    tagsHtml += `<span class="member-tag">${tag}</span>`;
                });
                tagsHtml += '</div>';
            }
            
            // 更新内容（包含标签区域）
            memberInfo.innerHTML = `
                <h1>${member.name}</h1>
                <span class="member-position">${member.position}</span>
                ${tagsHtml}
                <p class="member-description">${member.description}</p>
            `;
            
            // 每次切换成员时滚动到顶部
            memberDetail.scrollTop = 0;
        }
        
        // === 初始化成员搜索和筛选功能 ===
        function initMemberFilters() {
            const searchInput = document.getElementById('memberSearch');
            const letterFilters = document.querySelectorAll('.letter-filter span');
            
            // 搜索功能
            if (searchInput) {
                searchInput.addEventListener('input', function() {
                    const searchTerm = this.value.toLowerCase();
                    filterMembers(searchTerm);
                });
            }
            
            // 字母筛选功能
            letterFilters.forEach(filter => {
                filter.addEventListener('click', function() {
                    // 更新筛选器激活状态
                    letterFilters.forEach(f => f.classList.remove('active'));
                    this.classList.add('active');
                    
                    const letter = this.textContent;
                    if (letter === '全部') {
                        filterMembers('');
                    } else {
                        filterMembers(letter);
                    }
                });
            });
        }
        
        // === 筛选成员 ===
        function filterMembers(filter) {
            const memberItems = document.querySelectorAll('.member-item');
            
            memberItems.forEach(item => {
                const memberName = item.getAttribute('data-name');
                const show = filter === '' || 
                            (filter.length === 1 && memberName.startsWith(filter)) ||
                            (filter.length > 1 && memberName.toLowerCase().includes(filter));
                
                item.style.display = show ? 'flex' : 'none';
            });
            
            // 如果当前选中的成员被隐藏，则显示第一个可见的成员
            const activeMember = document.querySelector('.member-item.active');
            if (!activeMember || activeMember.style.display === 'none') {
                const firstVisible = document.querySelector('.member-item[style="display: flex"]');
                if (firstVisible) {
                    firstVisible.click();
                }
            }
        }
    </script>
</body>
</html>